<template>
  <div>
    <navbar select="10" class="navbarBox"></navbar>

    <div class="formBox">
      <div class="registerTitle">注册</div>
      <el-form :label-position="labelPosition" label-width="85px" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.name" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input type="password" v-model="confirmPassword" placeholder="请确认密码"></el-input>
        </el-form-item>

        <el-form-item label="交易密码">
          <el-input type="password" v-model="formLabelAlign.t_password" placeholder="请确认密码"></el-input>
        </el-form-item>


        <el-form-item label="验证码">
          <div style="display: flex;">
            <el-input v-model="formLabelAlign.code" placeholder="请输入验证码"></el-input>
            <el-button :disabled="counting" style="width: 200px;margin-left: 10px;" @click="startCountdown()">{{
              buttonText }}</el-button>
          </div>
        </el-form-item>

        <!-- <el-form-item label="真实姓名">
        <el-input v-model="formLabelAlign.name" placeholder="请输入真实姓名"></el-input>
      </el-form-item>

      <el-form-item label="身份证号码">
        <el-input v-model="formLabelAlign.id" placeholder="请输入身份证号码"></el-input>
      </el-form-item> -->
      </el-form>
      <el-checkbox v-model="checked">我同意《用户协议》</el-checkbox>
      <div style="">
        <el-button class="submitForm" @click="submitForm()"
          :style="{ background: $store.state.personality }">注册</el-button>
      </div>
    </div>

    <!-- 实名认证 -->
    <el-dialog :title="title" :visible.sync="visible" width="700px">
      <el-form :model="authenticationForm" label-width="80px" ref="authenticationForm" v-if="title == '实名认证'">

        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" style="width:500px" v-model="authenticationForm.certNo"></el-input>
        </el-form-item>

        <el-form-item label="身份证号">
          <el-input placeholder="请输入用户名" style="width:500px" v-model="authenticationForm.certName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 470px;margin: 30px auto;" @click="authenticationSubmit">提交</el-button>
        </el-form-item>
      </el-form>
       
      <div v-else class="flex jus-center">
        <vue-qrcode :value="value" :options="{ width: 200 }" style="margin:0 auto ;"></vue-qrcode>
      </div>
    </el-dialog>
    <bottom class="bottomBox2"></bottom>
  </div>
</template>

<script>
import navbar from "@/components/navbar/navbar.vue";
import bottom from "@/components/bottom/bottom.vue";
import store from "@/store";
import { Base64 } from 'js-base64';
export default {
  components: {
    navbar,
    bottom
  },
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        password: '',
        t_password: "",//交易密码
        phone: '',
        code: "",
        country_code: "86",
      },
      confirmPassword: "",
      counting: false,
      countdown: 60,
      buttonText: '获取验证码',
      checked: true,
      visible: false,
      title:"实名认证",
      value:"",
      authenticationForm: {
        certName: "",
        certNo: "",
        userId: ""
      }
    };
  },
  mounted() {
    this.authenticationForm.metaInfo = Base64.encode(JSON.stringify(window.getMetaInfo()));
    console.log('getMetaInfo',window)
  },
  methods: {
    submitForm() {
      if (!(this.formLabelAlign.name && this.formLabelAlign.password && this.formLabelAlign.t_password && this.formLabelAlign.phone && this.formLabelAlign.code)) {
        this.$message({
          message: '请将信息填写完整！',
          type: 'warning'
        });
        return
      }

      if (this.formLabelAlign.password != this.confirmPassword) {
        this.$message({
          message: '两次密码输入不一致',
          type: 'warning'
        });
        return
      }



      this.apis.register(this.formLabelAlign).then((res) => {
        if (res.code == 0) {
          this.$message.success('注册成功')

          //  this.$router.push({ path: "/" });

          this.visible = true
          this.authenticationForm.userId = res.data.user_id;
        } else {
          this.$message.error(res.msg)
        }
        // this.toAdministrators()
      })


    },
    startCountdown() {
      let that = this
      // 防止重复点击
      if (this.counting) {
        return;
      }

      if (!this.formLabelAlign.phone) {
        this.$message.warning('请输入联系方式')
        return
      }

      that.apis.getcode({ phone: this.formLabelAlign.phone }).then((res) => {
        if (res.code == 0) {
          that.$message.success('验证码发送成功')
          that.counting = true;
          that.countdown = 60;
          that.buttonText = that.countdown + ' 秒倒计时';

          const timerId = setInterval(() => {
            that.countdown -= 1;
            that.buttonText = that.countdown + ' 秒倒计时';

            if (that.countdown <= 0) {
              clearInterval(timerId);
              that.counting = false;
              that.buttonText = '获取验证码';
            }
          }, 1000);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    authenticationSubmit() {
      this.apis.authentication(this.authenticationForm).then((res) => {
        this.loading = false
        console.log("res",res)
        if (!res.data.hasOwnProperty('certifyUrl')) {
          this.$message.error("未获取到实名认证链接");
          return
        }
        //res.certifyUrl

        this.value = res.data.certifyUrl
        this.title = "扫码认证"


      });
    }
  }

}
</script>

<style lang="scss" scoped>
.formBox {
  width: 500px;
  margin: 0 auto;
  margin-top: 150px;
  padding-bottom: 100px;
}

.registerTitle {
  font-size: 27px;
  text-align: center;
  margin-bottom: 40px;
  padding-left: 70px;
}

.submitForm {
  width: 300px;
  border-radius: 50px;
  margin-left: 150px;
  margin-top: 30px;
  color: black;
}
</style>